<!-- 订单 -->
<template>
    <div class="bg-fa of total">
        <el-container style="height: 800px;  solid #eee">
            <el-aside width="200px" style="position: relative;top: 5%;background-color: white">
                <el-menu default-active="1">
                    <el-menu-item index="1" @click="currentMenu=1">
                        <template slot="title">
                            <i class="el-icon-film"></i>课程订单
                        </template>
                    </el-menu-item>
                    <el-menu-item index="2" @click="currentMenu=2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>班级订单
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <!-- /课程列表 开始 -->
                    <section class="container" v-if="currentMenu===1">
                        <header class="comm-title">
                            <h2 class="fl tac">
                                <span class="c-333">全部订单</span>
                            </h2>
                        </header>
                        <div class="ddd">
                            <div class="orderDiv test-1">
                                <p style="color: cadetblue;font-size:18px;font-weight: 700;">未付</p>
                                <!-- /无数据提示 开始-->
                                <section
                                    class="no-data-wrap"
                                    v-if="courseOrders.noOrders.length===0"
                                >
                                    <em class="icon30 no-data-ico">&nbsp;</em>
                                    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                </section>
                                <!-- /无数据提示 结束-->

                                <el-card
                                    class="box-card"
                                    v-for="order in courseOrders.noOrders"
                                    :key="order.id"
                                >
                                    <div style="position: relative;display: flex;height:230px">
                                        <span style="width:75%;">
                                            <a
                                                :href="'/course/'+order.courseId"
                                                :title="order.courseTitle"
                                            >
                                                <img
                                                    :src="order.courseCover"
                                                    :alt="order.courseTitle"
                                                    style="width:100%; height:100%"
                                                />
                                            </a>
                                        </span>

                                        <span
                                            style="position: relative;height:100%; width:25%;left:3%;"
                                        >
                                            <a
                                                :href="'/course/'+order.courseId"
                                                :title="order.courseTitle"
                                                class="course-title fsize18 c-333"
                                            >{{order.courseTitle}}</a>
                                            <br />
                                            <br />
                                            <el-tag
                                                type="info"
                                                effect="plain"
                                            >主讲老师：{{order.teacherName}}</el-tag>
                                            <br />
                                            <br />
                                            <el-tag type="warning">价格：{{order.totalFee}} ￥</el-tag>

                                            <br />
                                            <br />
                                            <span style="position: absolute; left:30%; bottom:0%">
                                                <el-button
                                                    type="primary"
                                                    plain
                                                    @click="ifOrderPayAndDelete(order.courseId,order.orderNo)"
                                                >去付款</el-button>
                                            </span>
                                        </span>
                                    </div>
                                </el-card>
                            </div>

                            <div class="orderDiv test-1">
                                <div class="cc-l-wrap">
                                    <p style="color: cadetblue;font-size:18px;font-weight: 700;">已付</p>
                                    <!-- /无数据提示 开始-->
                                    <section
                                        class="no-data-wrap"
                                        v-if="courseOrders.yesOrders.length===0"
                                    >
                                        <em class="icon30 no-data-ico">&nbsp;</em>
                                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                    </section>
                                    <!-- /无数据提示 结束-->

                                    <el-card
                                        class="box-card"
                                        v-for="order in courseOrders.yesOrders"
                                        :key="order.id"
                                    >
                                        <div style="position: relative;display: flex;height:230px">
                                            <span style="width:75%;">
                                                <a
                                                    :href="'/course/'+order.courseId"
                                                    :title="order.courseTitle"
                                                >
                                                    <img
                                                        :src="order.courseCover"
                                                        :alt="order.courseTitle"
                                                        style="width:100%; height:100%"
                                                    />
                                                </a>
                                            </span>

                                            <span
                                                style="position: relative;height:100%; width:25%;left:3%;"
                                            >
                                                <a
                                                    :href="'/course/'+order.courseId"
                                                    :title="order.courseTitle"
                                                    class="course-title fsize18 c-333"
                                                >{{order.courseTitle}}</a>
                                                <br />
                                                <br />
                                                <el-tag
                                                    type="info"
                                                    effect="plain"
                                                >主讲老师：{{order.teacherName}}</el-tag>
                                                <br />
                                                <br />
                                                <el-tag type="warning">价格：{{order.totalFee}} ￥</el-tag>

                                                <br />
                                                <br />
                                                <span
                                                    style="position: absolute; left:30%; bottom:0%"
                                                >
                                                    <el-button
                                                        type="primary"
                                                        plain
                                                        @click="$router.push({ path: '/course/' + order.courseId });"
                                                    >立即观看</el-button>
                                                </span>
                                            </span>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /课程列表 结束 -->

                    <!-- /课程列表 开始 -->
                    <section class="container" v-if="currentMenu===2">
                        <header class="comm-title">
                            <h2 class="fl tac">
                                <span class="c-333">全部订单</span>
                            </h2>
                        </header>
                        <div class="ddd">
                            <div class="orderDiv test-1">
                                <p style="color: cadetblue;font-size:18px;font-weight: 700;">未付</p>
                                <!-- /无数据提示 开始-->
                                <section
                                    class="no-data-wrap"
                                    v-if="classOrders.noOrders.length===0"
                                >
                                    <em class="icon30 no-data-ico">&nbsp;</em>
                                    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                </section>
                                <!-- /无数据提示 结束-->

                                <el-card
                                    class="box-card"
                                    v-for="order in classOrders.noOrders"
                                    :key="order.id"
                                >
                                    <div style="position: relative;display: flex;height:230px">
                                        <span style="width:75%;">
                                            <a
                                                :href="'/classroom/'+order.classId"
                                                :title="order.courseTitle"
                                            >
                                                <img
                                                    :src="order.courseCover"
                                                    :alt="order.courseTitle"
                                                    style="width:100%; height:100%"
                                                />
                                            </a>
                                        </span>

                                        <span
                                            style="position: relative;height:100%; width:25%;left:3%;"
                                        >
                                            <a
                                                :href="'/classroom/'+order.classId"
                                                :title="order.courseTitle"
                                                class="course-title fsize18 c-333"
                                            >{{order.courseTitle}}</a>
                                            <br />
                                            <br />

                                            <br />
                                            <br />
                                            <el-tag type="warning">价格：{{order.totalFee}} ￥</el-tag>

                                            <br />
                                            <br />
                                            <span style="position: absolute; left:30%; bottom:0%">
                                                <el-button
                                                    type="primary"
                                                    plain
                                                    @click="ifOrderPayAndDelete(order.classId,order.orderNo)"
                                                >去付款</el-button>
                                            </span>
                                        </span>
                                    </div>
                                </el-card>
                            </div>

                            <div class="orderDiv test-1">
                                <div class="cc-l-wrap">
                                    <p style="color: cadetblue;font-size:18px;font-weight: 700;">已付</p>
                                    <!-- /无数据提示 开始-->
                                    <section
                                        class="no-data-wrap"
                                        v-if="classOrders.yesOrders.length===0"
                                    >
                                        <em class="icon30 no-data-ico">&nbsp;</em>
                                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                    </section>
                                    <!-- /无数据提示 结束-->

                                    <el-card
                                        class="box-card"
                                        v-for="order in classOrders.yesOrders"
                                        :key="order.id"
                                    >
                                        <div style="position: relative;display: flex;height:230px">
                                            <span style="width:75%;">
                                                <a
                                                    :href="'/classroom/'+order.classId"
                                                    :title="order.courseTitle"
                                                >
                                                    <img
                                                        :src="order.courseCover"
                                                        :alt="order.courseTitle"
                                                        style="width:100%; height:100%"
                                                    />
                                                </a>
                                            </span>

                                            <span
                                                style="position: relative;height:100%; width:25%;left:3%;"
                                            >
                                                <a
                                                    :href="'/classroom/'+order.classId"
                                                    :title="order.courseTitle"
                                                    class="course-title fsize18 c-333"
                                                >{{order.courseTitle}}</a>
                                                <br />
                                                <br />

                                                <br />
                                                <br />
                                                <el-tag type="warning">价格：{{order.totalFee}} ￥</el-tag>

                                                <br />
                                                <br />
                                                <span
                                                    style="position: absolute; left:30%; bottom:0%"
                                                >
                                                    <el-button
                                                        type="primary"
                                                        plain
                                                        @click="$router.push({ path: '/classroom/' + order.classId });"
                                                    >立即进入</el-button>
                                                </span>
                                            </span>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /课程列表 结束 -->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getAllOrdersOfUser, ifOrderPayAndDelete } from "@/api/order/order";
import cookie from "js-cookie";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            courseOrders: {
                noOrders: [],
                yesOrders: [],
            },
            classOrders: {
                noOrders: [],
                yesOrders: [],
            },
            currentMenu: 1,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getAllOrdersOfUser() {
            getAllOrdersOfUser().then((response) => {
                let noOrders = response.data.noOrders;
                let yesOrders = response.data.yesOrders;
                for (let i = 0; i < noOrders.length; i++) {
                    if (noOrders[i].courseId) {
                        this.courseOrders.noOrders.push(noOrders[i]);
                    } else {
                        this.classOrders.noOrders.push(noOrders[i]);
                    }
                }
                for (let i = 0; i < yesOrders.length; i++) {
                    if (yesOrders[i].courseId) {
                        this.courseOrders.yesOrders.push(yesOrders[i]);
                    } else {
                        this.classOrders.yesOrders.push(yesOrders[i]);
                    }
                }
                console.log(this.courseOrders, this.classOrders);
            });
        },
        init() {
            var token = cookie.get("edu_token");
            if (!token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        window.location.href = "/login";
                    })
                    .catch(() => {});
            } else {
                this.getAllOrdersOfUser();
            }
        },
        ifOrderPayAndDelete(courseId, orderNo) {
            ifOrderPayAndDelete(courseId).then((response) => {
                if (response.data.ifPay) {
                    this.getAllOrdersOfUser();
                    this.$message({
                        message: response.message,
                        type: "success",
                    });
                } else {
                    this.$router.push({ path: "/order/" + orderNo });
                }
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scope>
.ddd {
    height: 550px;
    position: relative;
    display: flex;
}
.orderDiv {
    width: 45%;
    height: 100%;
    overflow: scroll;
}
.test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(52, 168, 240, 0.951);
    background: #868585;
}
.test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(28, 88, 110, 0.937);
    border-radius: 10px;
    background: #ededed;
}
.el-aside {
    color: #333;
}
.total {
    position: relative;
    left: 10%;
    top: 5%;
    background-color: white;
}
</style>